<template>
<view>
		<view class="" style="display: flex;margin:30upx 70upx;color: #ccc;justify-content: space-around;">
			<!-- <view :class="{active:isActive}" @click="Aclick" v-for="item in material_id" :key='item.id'>
				{{item}}
			</view> -->
			<view :class="{active:isActive}" @click="Aclick">
				产品图
			</view>
			<view :class="{active:isActive1}" @click="Aclick1" style="margin: 0upx 40upx 0upx 60upx;">
				文化图
			</view>
			<view :class="{active:isActive2}" @click="Aclick2" style="margin: 0upx 60upx 0upx 40upx;">
				创意图
			</view>
			<view :class="{active:isActive3}" @click="Aclick3">
				活动图
			</view>
		</view>
		<view v-show="ischanpin" style="display: flex;flex-direction: row;flex-wrap: wrap;" v-for="(item,index) in obj1" :key='index'>
			<image style="width: 360upx;height: 400upx;margin:10upx 0upx 10upx 10upx;" :src="item.image" mode=""></image>
		</view>
		<view v-show="iswenhua" style="display: flex;flex-direction: row;flex-wrap: wrap;" v-for="(item,index) in obj2" :key='index'>
			<image style="width: 360upx;height: 400upx;margin:10upx 0upx 10upx 10upx;" :src="item.image" mode=""></image>
		</view>
		<view v-show="ischuangyi" style="display: flex;flex-direction: row;flex-wrap: wrap;" v-for="(item,index) in obj3" :key='index'>
			<image style="width: 360upx;height: 400upx;margin:10upx 0upx 10upx 10upx;" :src="item.image" mode=""></image>
		</view>
		<view v-show="ishuodong" style="display: flex;flex-direction: row;flex-wrap: wrap;" v-for="(item,index) in obj4" :key='index'>
			<image style="width: 360upx;height: 400upx;margin:10upx 0upx 10upx 10upx;" :src="item.image" mode=""></image>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				obj1: [],
				obj2: [],
				obj3: [],
				obj4: [],
				material: [],
				list: [],
				material_id:{},
				iswenhua: false,
				ischuangyi: false,
				ischanpin : true,
				ishuodong : false,
				isActive : true,
				isActive1 : false,
				isActive2 : false,
				isActive3 : false,
				user_id:'',
				res:[],
			}
		},
		onLoad() {
		            uni.getStorage({
		                    key: 'user_id',
		                    success: (res) => {
		                     this.user_id = res.data
		                     this.setajax()
		                    },
		                   });
		        },
		methods: {
			setajax(){
				let o = this
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/Material/index',
					method: 'POST',
					data:{
						user_id: this.user_id,
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
					o.list = res.data.data.list.list
					// console.log(this.list)
					
					let obj1 = this.list.filter(function(item,index,array){
							//元素值，元素的索引，原数组。
							return (item.id == "1");
					});
					let obj2 = this.list.filter(function(item,index,array){
							//元素值，元素的索引，原数组。
							return (item.id == "2");
					});
					let obj3 = this.list.filter(function(item,index,array){
							//元素值，元素的索引，原数组。
							return (item.id == "3");
					});
					let obj4 = this.list.filter(function(item,index,array){
							//元素值，元素的索引，原数组。
							return (item.id == "4");
					});
					console.log(obj2)
					o.obj1 = obj1
					o.obj2 = obj2
					o.obj3 = obj3
					o.obj4 = obj4
					
					for(var i=0; i<o.list.length; i++) {
						o.list[i].image = 'https://cx.mingmeijt.com' + o.list[i].image
						// console.log(o.list[i].image)
					}
					this.material_id = res.data.data.material_id
					},
					fail: () => {},
					complete: () => {}
				});
			},
			Aclick : function(){
				this.ischanpin = true
				this.iswenhua = false
				this.ischuangyi = false
				this.ishuodong = false
				this.isActive = true
				this.isActive1 = false
				this.isActive2 = false
				this.isActive3 = false
			},
			Aclick1 : function(){
				this.ischanpin = false
				this.iswenhua = true
				this.ischuangyi = false
				this.ishuodong = false
				this.isActive = false
				this.isActive1 = true
				this.isActive2 = false
				this.isActive3 = false
			},
			Aclick2 : function(){
				this.ischanpin = false
				this.iswenhua = false
				this.ischuangyi = true
				this.ishuodong = false
				this.isActive = false
				this.isActive1 = false
				this.isActive2 = true
				this.isActive3 = false
			},
			Aclick3 : function(){
				this.ischanpin = false
				this.iswenhua = false
				this.ischuangyi = false
				this.ishuodong = true
				this.isActive = false
				this.isActive1 = false
				this.isActive2 = false
				this.isActive3 = true
			},
		}
	}
</script>

<style>
 .active {
	 border-bottom: 5upx solid #000;
	 color: #000;
	 }
	 page {
		 background-color: #fff;
	 }
</style>
